<template>
    <div>
      <el-upload
        class="avatar-uploader"
        :action="upload.url"
        :multiple = true
        :headers="upload.headers"
        :list-type="listType"
        :file-list="fileList"
        :before-upload="beforeUpload"
        :on-remove="handleRemove"
        :on-error="handleError"
        :on-success="handleUploadSuccess"
        :on-preview="handlePreview"
        :on-exceed="handleExceed"
        :limit="maxCount"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
</template>
<script>
  import { getToken } from "@/utils/auth";

  export default {
    name: 'multipleUpload',
    props: {
      // 图片属性数组
      value: Array,
      // 最大上传图片数量
      maxCount: {
        type: Number,
        default: 5
      },
      listType: {
        type: String,
        default: "text"
      }
    },
    data() {
      return {
        // 上传 导入参数
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/common/upload",
        },
        // 记录图片上传个数
        imageCount: 0,
        // 记录上传的文件 返回给 调用父组建
        inputValue: [],
      }
    },
    computed: {
      fileList() {
        let fileList=[];
        for(let i=0;i<this.value.length;i++){
          fileList.push({uid: this.value[i].id, name: this.value[i].name ,url:this.value[i].url});
        }
        return fileList;
      }
    },
    methods: {
      emitInput(inputValue) {
        this.$emit('input', inputValue)
      },
      handleError(err, file, fileList){//上传失败
        console.log(err)
      },
      handleRemove(file, fileList) {
        // console.log(file.uid)
        this.imageCount --;
        this.inputValue = this.inputValue.filter(value => value.id != file.uid)
        // console.log(this.inputValue)
        this.emitInput(this.inputValue);
      },
      handlePreview(file) {
        console.log(file)
      },
      beforeUpload(file) {
        this.imageCount ++;
        console.log("上传之前=="+JSON.stringify(file));
      },
      handleUploadSuccess(res, file) {
        if (res.code == 200) {
          this.fileList.push({uid: res.file.id, name: res.file.name, url: res.file.url});
          this.inputValue.push({
            id: res.file.id,
            name: res.file.name,
            url: res.file.url,
            path: res.file.path
          })
          // 图片全部上传后
          if (this.imageCount == this.fileList.length) {
            this.emitInput(this.inputValue);
            this.msgSuccess("上传成功！")
          }
        } else {
          this.fileList = [];
          this.msgError("上传失败，原因："+res.msg)
          this.emitInput([])
        }
      },
      handleExceed(files, fileList) {
        this.msgError('最多只能上传'+this.maxCount+'个文件')
      },
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
